<template>
    <view class="details">
		<image src="/static/back.png" class="back"></image>
        <view class="lunbo">
            <swiper class="swiper-box" circular :indicator-dots="true" :autoplay="true" :interval="2000">
                <swiper-item v-for="(item, index) in lunboData" :key="index">
                    <view class="swiper-item" style="height: 400rpx">
						<easy-loadimage 
							:scroll-top="0"
							:image-src="url+item"
							loading-mode="spin-circle"
						>
						</easy-loadimage>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view class="table" v-for="(item,index) in deData" v-show="item.length > 0">
            <text class="title">{{adress}}</text>
			<view class="type">{{index == 0 ? '冀蛋优品' : '冀蛋臻品'}}系列</view>
           <!-- <uni-table ref="table" border stripe width=100% emptyText="暂无数据" style="margin-top: 20px;">
            <uni-tr class="head">
                <uni-th width="40" align="center">品种</uni-th>
                <uni-th width="20" align="center">日龄</uni-th>
                <uni-th width="20" align="center">存栏量</uni-th>
                <uni-th width="20" align="center">蛋重</uni-th>
                <uni-th width="20" align="center">次蛋率</uni-th>
                <uni-th width="20" align="center">价格</uni-th>
                <uni-th width="20" align="center">包装规格</uni-th>
                <uni-th width="20" align="center">供应量</uni-th>
            </uni-tr>
            <uni-tr v-for="(item,index) in deData" :key="index">
                <uni-th align="center" width="40">{{ item.variety }}</uni-th>
                <uni-th align="center" width="10">200</uni-th>
                <uni-th align="center" width="10">20000</uni-th>
                <uni-th align="center" width="10">42斤</uni-th>
                <uni-th align="center" width="10">3%</uni-th>
                <uni-th align="center" width="10">160元</uni-th>
                <uni-th align="center" width="10">46斤/360枚</uni-th>
                <uni-th align="center" width="10">120箱</uni-th>
            </uni-tr>
    
           </uni-table> -->
		   <view style="width: 100%;" class="view-table">
		       <view class="th thead">
		           <view width="40" align="center">品种</view>
				   <view width="10" align="center">日龄</view>
				   <view width="20" align="center">存栏量</view>
				   <view width="10" align="center">蛋重</view>
				   <view width="10" align="center">次蛋率</view>
				   <view width="10" align="center">价格</view>
				   <view width="20" align="center">包装规格</view>
				   <view width="20" align="center">特色</view>
				   <view width="10" align="center">供应量</view>
		       </view>
		       <view class="th" v-for="(item2,index2) in item" :key="index2">
		           <view align="center" width="40">{{ item2.breed }}</view>
		           <view align="center" width="10">{{ item2.age }}</view>
		           <view align="center" width="10">{{ item2.exist }}</view>
		           <view align="center" width="10">{{ item2.weight }}斤</view>
		           <view align="center" width="10">{{ item2.defect }}%</view>
		           <view align="center" width="10">{{ parseInt(item2.price) }}</view>
		           <view align="center" width="20">{{ item2.package }}</view>
				   <view align="center" width="10">{{ item2.features }}</view>
		           <view align="center" width="10">{{ item2.num }}箱</view>
		       </view>
		    </view>
        </view>
        <view class="desc">
			<rich-text :nodes="introduction"></rich-text>
           <!-- <text>石家庄灵寿县方正养殖有限公司成立于2015年6月4日，位于河北省石家庄市灵寿县灵寿镇南合村，是一家以畜牧业为主的有限责任公司。公司注册资本1000万人民币，法定代表人为吴帅，注册状态为存续，登记机关为灵寿县市场监督管理局。</text>
           <text>该公司是省级蛋鸡标准化示范场、无公害产品认证企业，并获评河北省“十佳”家离企业、市级农业产业化重点龙头企业等荣誉称号。主营业务包括父母代种鸡养殖(存栏7万套)、商品母雏生产(年提供350万只)以及青年鸡培育(年供应110万只)，采用分段分区全进全出的养殖模式，确保生物安全可控。</text>
           <text>在技术层面，公司引进农大3号和海兰褐节粮型蛋鸡品种，通过精细化管理和先进孵化设备，实现推鸡高均匀度与成活率(产蛋期成语率>95%，高峰产蛋率>95%)。2018年通过“中国商品代育成鸡标准示范场”认证，青年鸡质里符合体重、胫长等关键指标，且提供抗体检测和免疫程序保障。</text>
           <text>公司下设灵寿县种鸡场、凤隆养殖有限公司等分支机构，拥有12项商标和2个行政许可，参保人数显示为0(2022年报数据)。其养殖技术注重前期发育管理，提出“5周龄定终身”理念，通过骨骼、免疫器官和消化系统的科学培育提升生产潜力。</text> -->
        </view>
		<view class="" v-for="(item, index) in pic" :key="index">
			<easy-loadimage 
				:scroll-top="scrollTop"
				:image-src="url+item"
				loading-mode="spin-circle">
			</easy-loadimage>
		</view>
		
        
    </view>
</template>

<script>
import { getChickenPrice } from '@/api/index.js'
export default {
    data() {
        return {
          deData: null,
          adress: '',
          lunboData: [],
		  pic: [],
		  introduction: '',
		  url: 'https://api.jidanyoupin.com/',
		  id: '',
		  chickenName: '',
		  scrollTop: 0
        }
    },
    onLoad(data) {
		this.id = data.id
        getChickenPrice({id: data.id}).then((res) => {
            const list = res.data
			this.chickenName = res.data.chickenFarm.name
            this.adress = res.data.chickenFarm.address + res.data.chickenFarm.name
			this.lunboData = res.data.chickenFarm.banner.split(',')
            this.pic = res.data.chickenFarm.photos.split(',')
			this.introduction = res.data.chickenFarm.introduction
            this.deData = [res.data.you, res.data.zhen]
        })
    },
    methods: {

    },
	// 分享朋友圈
	onShareTimeline(res) {
		return {
		  title: `${this.chickenName}今日鸡蛋报价`,
		  //imageUrl: 'http://demo.png',
		  path: '/pages/showDetail/index',
		  query: `id=${this.id}`,
		}
	},
	// 分享好友
	onShareAppMessage() {
	    return {
	      title: `${this.chickenName}今日鸡蛋报价`,
	      path: `/pages/showDetail/index?id=${this.id}`,
	    }
	},
	onPageScroll({scrollTop}) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		this.scrollTop = scrollTop;
	},
}
</script>

<style scoped lang="scss">
.details {
    overflow-x: hidden;
    background-color: #fff;
    min-height: 100vh;
    padding-bottom: 20rpx;
}
.back {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	width: 40rpx;
	height: 40rpx;
	display: none;
}
.lunbo {
    width: 100%;
	border-bottom: 1rpx solid #000;
	.swiper-box{
		height: 400rpx;
	}
    .swiper-item {
        display: block;
        height: 400rpx;
        text-align: center;
        image {
            width: 100%;
            height: 400rpx;
        }
    }
}
.table { 
    border: 1rpx solid #000;
	border-top: none;
    .uni-table-th {
        color: #000 !important;
    }
   .title {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 35rpx;
        color: #000;
        padding-top: 30rpx;
        font-weight: bold;
    }
	.type {
		text-align: center;
		margin: 5rpx 0 30rpx 0;
		font-weight: bold;
		color: red;
	}
	
}
.show {
    width: 100%;
}
.uni-table {
    table-layout: fixed;
    overflow: hidden;
    text-overflow: ellipsis; //省略号表示·
    white-space: nowrap; //不换行
    .head {
        background-color: #7cded7;
        .uni-table-th {
            color: #000 !important;
        }
    }

    .uni-table-td {
        table-layout: inherit;
        overflow: hidden;
        text-overflow: ellipsis; //省略号表示
        white-space: nowrap; //不换行
    }

    .uni-table-th {
        box-sizing: border-box;
        padding: 8rpx 5rpx;
        color: #333;
        font-weight: 400;
        border-color: #000;
    }
    
}
.desc {
    background-color: #7cded7;
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx;
    margin: 60rpx 0;
    text {
        display: block;
        margin: 10px 0;
        color: #000;
        font-size: 26rpx;
    }
}
.view-table {
	display: table;
	.thead {
		background-color: #7cded7;
		color: #000;
		font-weight: bold;
	}
	.th {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 30rpx;
		font-size: 28rpx;
		position: relative;
		view {
			width: 100%;
			height: 60rpx;
			padding: 10rpx 0;
			flex: 3;
			border-right: 1rpx solid #000;
			border-top: 1rpx solid #000;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		view:nth-child(8),view:nth-child(7) {
	        flex: 4;
		}
		view:nth-child(2),view:nth-child(4),view:nth-child(5),view:nth-child(6) {
		    flex: 2;
			text-align: center;
		}
		.rowspan {
			border-top: 1rpx solid #fff;
		}
		.show-row {
			position: relative;
			text {
				position: absolute;
				z-index: 10;
			}
		}
	}
}
</style>